import React, { Component } from 'react';

class ClassComponent extends Component {
    constructor(props) {
        super(props);
        // 存储状态
        this.state = {
            date: new Date()
        }
    }

    UNSAFE_componentWillMount() {

    }

    // 组件挂载完成之后执行
    componentDidMount() {
        this.timer = setInterval(()=>{
            // 更新state，不能使用this.state
            this.setState({
                date: new Date()
            })
        }, 1000)
    }

    UNSAFE_componentWillReceiveProps(nextProps) {

    }

    // 避免视图重复渲染
    shouldComponentUpdate(nextProps, nextState) {
        return nextState.date !== this.state.date
    }

    UNSAFE_componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    // 组件卸载之前执行
    componentWillUnmount() {
        this.timer = null
    }

    render() {
        const { date } = this.state
        return (
            <div>
                <div>hello，word</div>
                <div> { date.toLocaleTimeString() } </div>
            </div>
        );
    }
}

export default ClassComponent;